Responsive Auto Layout in Figma is a powerful design system that allows frames and their child layers to automatically adjust their position, spacing, alignment, and size when content or available space changes. It is one of the most important features for creating flexible interfaces that can adapt to different screen sizes and content lengths.
Auto Layout is especially useful for responsive buttons, navigation bars, cards, forms, lists, dashboards, mobile screens, website sections, and reusable components. Instead of manually repositioning every element whenever content or dimensions change, Figma automatically updates the layout according to the configured Auto Layout properties.
Responsive Auto Layout combines flow direction, spacing, padding, alignment, resizing behavior, minimum and maximum dimensions, wrapping, nested Auto Layout frames, and components to create adaptable designs.
Figma supports three main Auto Layout flows: Vertical, Horizontal, and Grid. Horizontal and vertical flows can also use wrapping, while Grid organizes objects into rows and columns.
Learn more with JustAcademy Figma Training and Register for Figma Course Demo.
Responsive Auto Layout is an approach in Figma where Auto Layout properties are configured so that interface elements automatically respond to content changes and changes in the available space.
For example, a button can automatically become wider when its text changes from "Login" to "Create New Account" without requiring the designer to manually resize the button.
Responsive Auto Layout is a Figma layout system that automatically arranges and resizes elements according to their content, spacing, alignment, padding, and container dimensions.
Responsive design means creating interfaces that adapt when available space or content changes. Auto Layout provides a structured way to model this behavior in Figma.
For example, a horizontal navigation bar can resize its children as the available width changes, while a vertical content section can grow as more content is added.
Create Frame
↓
Add Content
↓
Apply Auto Layout
↓
Choose Flow
↓
Set Padding
↓
Set Gap
↓
Set Alignment
↓
Configure Resizing
↓
Add Min/Max Dimensions
↓
Test Different Sizes
Auto Layout is a Figma feature that automatically arranges child layers inside a frame according to layout rules such as direction, spacing, padding, alignment, and resizing.
Figma allows Auto Layout to be added to frames, selections of layers, components, and other supported objects. The shortcut for adding Auto Layout is Shift + A.
Windows → Shift + A
Mac → Shift + A
Responsive Page
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Actions
├── Hero Section
│ ├── Heading
│ ├── Description
│ └── Button
├── Content
│ ├── Cards
│ └── Lists
└── Footer
An Auto Layout frame acts as a parent container, while the layers placed inside it become child objects. The parent controls how those children are arranged and how the overall structure responds to changes.
Flow determines the primary direction in which children are arranged. Figma provides Vertical, Horizontal, and Grid Auto Layout flows.
Vertical Auto Layout arranges child layers from top to bottom along the vertical axis.
Vertical Auto Layout
┌────────────────────┐
│ Heading │
│ Description │
│ Button │
│ Card │
│ Footer │
└────────────────────┘
Vertical Auto Layout is useful for forms, article content, mobile screens, settings pages, menus, product information, and stacked cards.
Horizontal Auto Layout arranges child layers from left to right along the horizontal axis.
Horizontal Auto Layout
┌─────────────────────────────┐
│ Logo Menu Search User │
└─────────────────────────────┘
Horizontal Auto Layout is useful for navigation bars, button groups, toolbars, tags, chips, icon rows, and desktop headers.
Grid Auto Layout organizes children into rows and columns. It is useful for structured layouts such as dashboards, galleries, bento layouts, and tables.
Grid Auto Layout
┌────────┬────────┬────────┐
│ Card 1 │ Card 2 │ Card 3 │
├────────┼────────┼────────┤
│ Card 4 │ Card 5 │ Card 6 │
└────────┴────────┴────────┘
| Flow | Direction | Common Use |
|---|---|---|
| Horizontal | Left to right | Navigation, buttons, toolbars |
| Vertical | Top to bottom | Forms, lists, content sections |
| Grid | Rows and columns | Dashboards, galleries, bento layouts |
Wrap allows children in horizontal or vertical Auto Layout flows to move into a new row or column when they no longer fit within the available space.
Available Width
┌───────────────────────────┐
│ Tag 1 Tag 2 Tag 3 │
│ Tag 4 Tag 5 Tag 6 │
└───────────────────────────┘
Tags, chips, filters, categories, and badges can use horizontal Auto Layout with wrapping so that they move to another line when the available width becomes smaller.
Vertical wrapping can create multi-column arrangements where items move into another column after reaching the available height. This can be useful for structured lists and similar layouts.
Padding defines the space between the edges of the Auto Layout parent and its child layers. Padding can be set uniformly or independently for different sides.
┌──────────────────────────────┐
│ Top Padding │
│ ┌──────────────────────┐ │
│ │ Content │ │
│ └──────────────────────┘ │
│ Bottom Padding │
└──────────────────────────────┘
Gap controls the spacing between child layers in an Auto Layout frame. It helps maintain consistent distances between elements without manually positioning each object.
A fixed gap uses a specific numerical value between child objects.
Item 1
↓ 16px
Item 2
↓ 16px
Item 3
In horizontal and vertical Auto Layout flows, the gap can also be set to Auto so that available space is distributed between objects according to the Auto Layout behavior.
| Fixed Gap | Auto Gap |
|---|---|
| Uses a specific spacing value. | Distributes available space between items. |
| Useful for consistent component spacing. | Useful for layouts that need flexible distribution. |
| Example: 8px, 16px, 24px. | Useful when items need to be separated within available space. |
Alignment controls how child layers are positioned inside their Auto Layout parent along the relevant cross-axis or layout area.
Resizing determines how an Auto Layout frame or its child objects change dimensions when content or available space changes. Figma provides Fixed, Hug contents, Fill container, and minimum or maximum dimension controls.
Fixed width keeps the object's width at a specified value unless another layout operation changes it.
Fixed height keeps the object's height at a specified value.
Hug contents allows an Auto Layout frame to resize around its child content while respecting its padding and spacing.
Before:
[ Login ]
After:
[ Login to Dashboard ]
Button automatically grows
to fit the new text.
Fill container allows a child object inside an Auto Layout parent to occupy the available space in that dimension.
Parent Frame
┌──────────────────────────────┐
│ ┌──────────────────────────┐ │
│ │ Fill Container │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘
| Property | Behavior | Example |
|---|---|---|
| Hug | Grows or shrinks around content. | Button |
| Fill | Uses available parent space. | Content panel |
| Fixed | Keeps a defined dimension. | Icon or thumbnail |
Minimum width prevents an object from becoming smaller than the specified minimum value. This is useful for maintaining usability and preventing extremely narrow components.
Maximum width prevents an object from growing beyond a specified limit. This is especially useful for text content and website sections that should not become excessively wide.
Minimum height ensures that an object maintains at least a specified vertical size.
Maximum height prevents an object from becoming taller than the specified limit.
Minimum and maximum dimensions can be combined with other resizing behavior to control how far a responsive object can expand or contract.
Available Space
↓
Min Dimension
↓
Responsive Resizing
↓
Max Dimension
↓
Final Size
A responsive button is one of the simplest examples of Auto Layout. Place the text inside an Auto Layout frame, add horizontal and vertical padding, and use Hug contents so the button grows with its label.
Button
└── Text
└── Auto Layout Parent
├── Horizontal Padding
├── Vertical Padding
└── Hug Contents
Short Label
┌──────────────┐
│ Login │
└──────────────┘
Long Label
┌──────────────────────────────┐
│ Create New Account │
└──────────────────────────────┘
Cards are ideal for Responsive Auto Layout because their content can change while the card structure automatically adapts.
Card
├── Image
├── Content
│ ├── Title
│ ├── Description
│ └── Tags
└── Action
A card can contain several nested Auto Layout frames. For example, the card can use vertical Auto Layout while its action row uses horizontal Auto Layout.
Navigation bars can use horizontal Auto Layout to keep logos, links, search controls, and actions organized.
Header
├── Logo
├── Navigation
│ ├── Home
│ ├── About
│ └── Services
├── Search
└── Profile
Forms can use vertical Auto Layout for labels, input fields, helper text, and buttons. Nested horizontal Auto Layout can be used for grouped fields.
Form
├── Name Field
├── Email Field
├── Password Field
├── Remember Me
└── Submit Button
Lists benefit from Auto Layout because adding, removing, or changing list items automatically updates the position of the remaining items.
List
├── Item 1
├── Item 2
├── Item 3
└── Item 4
Dashboards can combine nested Auto Layout structures to create responsive sidebars, content sections, cards, statistics, tables, and action areas.
Dashboard
├── Sidebar
├── Header
├── Statistics
│ ├── Card 1
│ ├── Card 2
│ └── Card 3
├── Chart
└── Activity List
Website sections can use vertical Auto Layout for their overall structure and nested horizontal Auto Layout for content rows.
Hero
├── Heading
├── Description
├── CTA Buttons
└── Illustration
A hero section can use horizontal Auto Layout on wider screens while individual content blocks use vertical Auto Layout. This creates a multi-level responsive structure.
Nesting means placing one Auto Layout frame inside another. Nested Auto Layout is one of the most important techniques for building complex responsive interfaces because each frame can manage its own spacing and flow.
Page
└── Section
├── Heading Group
│ ├── Title
│ └── Description
└── Card Row
├── Card 1
├── Card 2
└── Card 3
A complex interface can combine vertical, horizontal, and grid Auto Layout frames. Each nested frame can use a different flow according to its content structure.
The parent Auto Layout frame determines how its child layers are arranged. Its own resizing behavior can also depend on the dimensions of its contents.
Child layers can use Fixed, Fill container, Hug contents, or dimension limits depending on the desired behavior.
Text is one of the most important considerations in responsive Auto Layout because text length can change the dimensions of the text layer and therefore affect the parent layout.
When a text-containing Auto Layout frame uses Hug contents, the frame can grow as the text becomes longer, provided the surrounding layout allows it.
Always test short, medium, and long text. A layout that works with a short heading may break when the heading becomes several lines long.
Responsive layouts should be tested with realistic text wrapping. Fixed widths, fill behavior, and parent dimensions can influence how text wraps inside a responsive component.
Images can be placed inside Auto Layout frames and configured with appropriate resizing behavior. A common pattern is to keep the image fixed or fill a container while allowing surrounding content to adapt.
Card
├── Image
└── Content
├── Title
├── Description
└── Button
Avatars are often fixed-size elements placed inside flexible horizontal Auto Layout rows. This keeps the avatar consistent while allowing names and descriptions to change.
A search bar can use Fill container so that it expands into available space while neighboring controls remain fixed or hug their content.
Header
├── Logo
├── Search → Fill Container
└── Profile → Fixed
A footer can use vertical Auto Layout for stacked sections and horizontal Auto Layout for columns, links, social icons, or action groups.
Footer
├── Company
├── Products
├── Resources
├── Social
└── Copyright
Auto Layout can be applied to components, allowing reusable components to adapt to content and dimension changes. Components can therefore become more flexible and maintainable.
Responsive components are components designed so their internal structure reacts appropriately when text, icons, dimensions, or surrounding layout changes.
Button Component
├── Icon
└── Label
Properties
├── Padding
├── Gap
├── Alignment
└── Resizing
When working with component instances, designers should test how text, icons, and other exposed properties affect the Auto Layout structure.
Variants are useful for meaningful component states such as size, type, status, or interaction state. Auto Layout handles the responsive arrangement and sizing inside those variants.
Auto Layout and Constraints solve different problems. Child objects inside an Auto Layout frame generally use Auto Layout resizing instead of ordinary constraints. However, an object can be configured to ignore the Auto Layout flow when independent positioning is needed.
Ignore Auto Layout allows a child to remain inside an Auto Layout parent while being positioned independently of the normal Auto Layout flow. This is useful for elements such as floating badges or overlays.
An Auto Layout frame can itself be nested inside a regular frame. In that situation, the Auto Layout frame can have constraints relative to its regular parent while its children use Auto Layout behavior.
Regular Screen
└── Auto Layout Content
├── Header
├── Content
└── Footer
Floating Overlay
└── Ignore Auto Layout
└── Bottom + Right
| Responsive Auto Layout | Constraints |
|---|---|
| Controls content flow. | Controls parent-relative positioning. |
| Manages spacing and padding. | Manages edge and center relationships. |
| Excellent for dynamic content. | Excellent for anchored elements. |
| Supports nested responsive structures. | Useful inside regular parent frames. |
Responsive Auto Layout helps a design adapt between different dimensions, but designers should still test important breakpoint ranges such as mobile, tablet, and desktop sizes.
Mobile layouts typically benefit from vertical Auto Layout, Fill container behavior, appropriate padding, and nested horizontal rows for controls.
Tablet layouts often require more horizontal space, making horizontal sections and responsive cards useful while still maintaining flexible vertical content structures.
Desktop layouts can combine horizontal navigation, multi-column content, dashboards, grid structures, and nested Auto Layout frames.
Mobile Layout
↓
Vertical Structure
↓
Flexible Widths
↓
Nested Auto Layout
↓
Tablet Testing
↓
Desktop Expansion
↓
Min/Max Dimensions
↓
Final Responsive Layout
Maximum width can prevent content from becoming excessively wide on large screens. This is particularly useful for text-heavy website sections and readable content containers.
Minimum width can prevent a component from becoming too narrow to remain usable. It is useful for buttons, cards, form fields, and navigation elements.
Card
Minimum Width → 200px
Maximum Width → 400px
↓
Flexible between limits
Minimum and maximum height can be used when a card needs to remain within a controlled visual range while still responding to content and available space.
Consistent spacing values help Auto Layout structures remain visually predictable. Designers should use a defined spacing system rather than random values throughout a design.
| Spacing | Common Use |
|---|---|
| 4px | Small icon or text spacing |
| 8px | Compact spacing |
| 12px | Small component spacing |
| 16px | Standard content spacing |
| 24px | Section or card spacing |
| 32px | Large section spacing |
| 48px | Major layout spacing |
Auto Layout works well with design tokens for spacing, typography, colors, and dimensions. Consistent tokens make responsive components easier to maintain.
A design system can use Auto Layout to create reusable buttons, inputs, cards, navigation items, badges, alerts, menus, and other components that adapt automatically to content.
Button
├── Icon
└── Text
Auto Layout
├── Gap
├── Padding
├── Alignment
└── Hug Contents
An input component can use Fill container for its width and Fixed or controlled height for its vertical dimension, depending on the design requirements.
An alert can use horizontal or vertical Auto Layout with Hug contents so that its height or width responds to message length.
Badges are excellent candidates for Hug contents because their dimensions should usually adapt to their text content.
Menus can use vertical Auto Layout for stacked items and nested horizontal Auto Layout for individual menu rows.
Pricing Card
├── Plan Name
├── Price
├── Description
├── Feature List
└── CTA Button
An e-commerce card can use nested Auto Layout for image, product information, price, rating, quantity, and action controls.
Grid Auto Layout can be useful for structured product collections where cards need to respond to the available layout space.
Dashboard statistics cards can use Auto Layout so that values, labels, icons, and supporting information remain organized as content changes.
Complex tables can use Grid Auto Layout when a structured row-and-column arrangement is appropriate. For content-heavy tables, careful testing is required to avoid excessive compression.
Bento layouts can use Grid Auto Layout to organize different-sized content areas into a structured responsive arrangement.
Grid Auto Layout is different from a visual layout guide grid. Auto Layout defines how content is organized and resized, while layout guides primarily act as visual alignment aids.
After creating a responsive Auto Layout design, test the prototype at different frame sizes and with different content lengths.
Use short labels, short descriptions, and minimal content to ensure that the layout does not create unnecessary empty space or unexpected alignment.
Replace labels and descriptions with longer content to verify that components expand, wrap, or resize correctly.
Resize the parent frame across multiple widths. Check whether Fill container, Fixed, Hug, and min/max settings work together as intended.
Change the height of the parent frame and verify that vertical content behaves correctly without unnecessary gaps or clipping.
Resize outer and inner Auto Layout frames separately. This helps identify which layer is responsible for unexpected spacing or sizing behavior.
Unexpected Layout
↓
Check Parent Auto Layout
↓
Check Flow Direction
↓
Check Padding
↓
Check Gap
↓
Check Alignment
↓
Check Child Resizing
↓
Check Hug / Fill / Fixed
↓
Check Min / Max
↓
Check Nested Auto Layout
↓
Resize Again
Fixed width is useful when a specific dimension must remain constant, but using it for every element can prevent the layout from adapting to available space.
Hug contents is essential for content-driven components such as buttons, badges, tags, and notification messages. Ignoring it can result in excessive empty space or unnecessary fixed dimensions.
Fill container should be used when a child needs to occupy available space in its Auto Layout parent. Applying it without considering the parent sizing behavior can create unexpected dimensions.
Without dimension limits, responsive objects can become too small or too large. Min and max dimensions provide additional control over responsive behavior.
Auto Layout is designed for structured content flow. Decorative elements or overlays that need independent positioning may be better handled outside the normal Auto Layout flow.
| Requirement | Recommended Property |
|---|---|
| Grow around content | Hug contents |
| Use available parent space | Fill container |
| Keep exact dimension | Fixed |
| Prevent becoming too small | Minimum dimension |
| Prevent becoming too large | Maximum dimension |
| Arrange vertically | Vertical Auto Layout |
| Arrange horizontally | Horizontal Auto Layout |
| Create rows and columns | Grid Auto Layout |
| Move items to another line | Wrap |
| Anchor independently | Ignore Auto Layout / appropriate constraints |
Create a reusable button that automatically changes its width according to its text.
Create a responsive content card using nested Auto Layout.
Create a responsive navigation bar containing a logo, navigation links, search field, and profile action.
Navigation
├── Logo → Fixed
├── Links → Hug
├── Search → Fill Container
└── Profile → Fixed
Create a responsive login form using vertical Auto Layout and flexible input fields.
Login Form
├── Heading → Hug
├── Email → Fill
├── Password → Fill
├── Remember → Hug
└── Button → Hug
Create a dashboard using nested Auto Layout for the sidebar, header, statistic cards, chart area, and activity list.
Dashboard
├── Sidebar
├── Main Content
│ ├── Header
│ ├── Statistics
│ ├── Chart
│ └── Activity
└── Floating Action
Create a product collection using Grid Auto Layout. Add product cards and test the layout at different frame sizes.
Product Grid
├── Product Card
├── Product Card
├── Product Card
├── Product Card
└── Product Card
Create a complete landing page using vertical Auto Layout for the page structure and nested Auto Layout frames for each section.
Landing Page
├── Navigation
├── Hero
├── Features
├── Testimonials
├── Pricing
└── Footer
Plan Layout
↓
Create Parent Frame
↓
Add Content
↓
Apply Auto Layout
↓
Choose Flow
↓
Set Padding
↓
Set Gap
↓
Set Alignment
↓
Configure Hug / Fill / Fixed
↓
Add Min / Max Dimensions
↓
Create Nested Auto Layout
↓
Convert Reusable Structures into Components
↓
Test Different Content
↓
Test Different Screen Sizes
↓
Debug
↓
Finalize Responsive Design
| Term | Meaning |
|---|---|
| Auto Layout | Figma system for automatically arranging and resizing child layers. |
| Responsive Auto Layout | Auto Layout configured to adapt to content and available space. |
| Vertical | Arranges objects from top to bottom. |
| Horizontal | Arranges objects from left to right. |
| Grid | Arranges objects into rows and columns. |
| Wrap | Moves overflowing items to another row or column. |
| Padding | Space between parent edges and child objects. |
| Gap | Space between child objects. |
| Hug Contents | Resizes a parent around its contents. |
| Fill Container | Allows a child to use available parent space. |
| Fixed | Keeps a defined dimension. |
| Min Width | Prevents width from becoming smaller than a limit. |
| Max Width | Prevents width from becoming larger than a limit. |
| Nested Auto Layout | Auto Layout frames placed inside other Auto Layout frames. |
| Ignore Auto Layout | Allows a child to be positioned independently of the normal Auto Layout flow. |
| Component | Reusable design structure that can contain Auto Layout. |
Responsive Auto Layout is a layout approach that allows elements to automatically adjust their arrangement and dimensions when content or available space changes.
The main flows are Vertical, Horizontal, and Grid.
The shortcut is Shift + A.
Hug contents allows an Auto Layout frame to resize around its child content while respecting its padding and spacing.
Fill container allows a child inside an Auto Layout frame to occupy available space in that dimension.
Fixed sizing keeps an object's dimension at a defined value.
Hug sizes around content, while Fill uses available space in the parent container.
Padding is the space between the edge of the Auto Layout parent and its child layers.
Gap defines the spacing between child layers inside an Auto Layout frame.
Nested Auto Layout means placing one Auto Layout frame inside another to create multi-level responsive structures.
Wrap allows items in supported horizontal or vertical Auto Layout flows to move into another row or column when available space is insufficient.
They prevent responsive components from becoming too small or too large.
Yes. Components can use Auto Layout to create flexible reusable components.
Yes. Their roles differ. Auto Layout manages content flow and resizing, while constraints can be used for appropriate parent-relative positioning, including on Auto Layout frames nested inside regular frames or on children configured to ignore Auto Layout.
Place the text inside an Auto Layout frame, use appropriate padding, and set the button dimensions to Hug contents so the button can grow with its label.
Place the search field inside a suitable Auto Layout parent and use Fill container when it should occupy available space between neighboring fixed or content-sized elements.
Use nested Auto Layout, appropriate child resizing, consistent padding and gaps, and minimum or maximum dimensions where necessary.
Long text can change layer dimensions and expose wrapping, overflow, spacing, or alignment problems that are not visible with short content.
Grid Auto Layout is useful for structured row-and-column layouts such as dashboards, galleries, bento layouts, and tables.
Its major advantage is that it reduces manual repositioning by allowing layouts and components to adapt automatically as content and available space change.
Responsive Auto Layout in Figma is one of the most important techniques for creating flexible and maintainable interface designs. It allows designers to build layouts that respond to content, available space, and dimension changes without manually repositioning every element.
Understanding Vertical, Horizontal, and Grid flows, along with padding, gap, alignment, Hug contents, Fill container, Fixed sizing, wrapping, and minimum and maximum dimensions, provides the foundation for professional responsive design.
The real power of Responsive Auto Layout comes from combining these properties with nested Auto Layout frames, components, variants, constraints, and appropriate testing. A well-structured design can therefore support buttons, cards, forms, navigation bars, dashboards, product grids, landing pages, and complete application screens.
Designers should always test responsive components with different content lengths and different screen sizes. Mobile, tablet, desktop, short text, long text, images, and nested structures should all be tested before finalizing a design.
For structured Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
